<template>
  <div>
    <div class="header_top">
      <div class="w960">
        <span class="time">ES搜索引擎-邮件资源搜索</span>
        <div class="toplinks">
          [&nbsp;
          <a
            href="https://www.elastic.co/guide/cn/elasticsearch/guide/current/index.html"
            target="_blank"
          >ElasticSearch权威指南</a>&nbsp;]
          [&nbsp;
          <a
            href="http://wpa.qq.com/msgrd?v=3&amp;uin=2109258438&amp;site=qq&amp;menu=yes"
            target="_blank"
          >QQ联系我</a>&nbsp;]
        </div>
      </div>
    </div>
    <el-container>
      <el-header height="100px">
        <div style="float:left">
          <img
            src="./image/elasticsearch.png"
            alt="图片说明文字"
            title="“Elastic搜索引擎”"
            style="float:left"
          />
          <font style="align:center;font-size:40px">基于ElasticSearch的邮件检索系统后台</font>
        </div>

        <div style="float:right;background:#BFEFFF;height:100px;width:150px">
          <div class="header-wrap">
            <div class="header-right">
              <div class="header-user-con">
                <!-- 全屏显示 -->
                <div class="btn-fullscreen" @click="handleFullScreen">
                  <el-tooltip
                    effect="dark"
                    :content="fullscreen?`取消全屏`:`全屏`"
                    placement="bottom"
                    style="font-size:30px;color:black"
                  >
                    <i class="el-icon-rank"></i>
                  </el-tooltip>
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell">
                  <el-tooltip
                    effect="dark"
                    :content="userSO_json?`用户名：${userSO_json.userName}
              手机号：${userSO_json.mobilePhone}身份：${userSO_json.role}`:`个人中心`"
                    placement="bottom"
                  >
                    <router-link to="/backhome/emlserver">
                      <i class="el-icon-user-solid" style="font-size:30px;"></i>
                    </router-link>
                  </el-tooltip>
                  <span class="btn-bell-badge" v-if="userSO_json"></span>
                </div>

                <!-- 用户头像 -->
                <div class="user-avator" v-if="imageName!=null">
                  <img :src="require('./imagehead/'+imageName)" />
                </div>
                <!-- 系统头像 -->
                <div class="user-avator" v-else-if="imageName==null">
                  <img
                    :src="require('./imagehead/1d4629e3-d86f-4ac4-a073-36f08dcc1810&headimage1.png')"
                  />
                </div>
                <!-- <div class="user-avator" v-else-if="newImageName!=null">
            <img :src="require('./imagehead/'+newImageName)"/>
                </div>-->
                <!-- 用户名下拉菜单 -->
                <div class="user-dropdown">
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                      <p style="width:60px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">{{userSO_json.userName}}</p>
                      <i class="el-icon-caret-bottom"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                      <el-dropdown-item divided command="changeImage">更换头像</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-dialog title="请修改你的用户头像" :visible.sync="imageDialog">
          <div style="background:#BBFFBB">
            <el-upload
              :onError="uploadError"
              :onSuccess="uploadSuccess"
              class="upload-demo"
              ref="upload"
              :auto-upload="false"
              accept="image/jpg, image/jpeg, image/png, image/bmp, image/gif"
              action
              :http-request="uploadImage"
            >
              <el-button slot="trigger" size="small" type="primary">----</el-button>
              <el-button slot="trigger" size="small" type="primary">----</el-button>
              <el-button slot="trigger" size="small" type="primary">----</el-button>
              <el-button slot="trigger" size="small" type="primary">----</el-button>
              <el-button slot="trigger" size="small" type="primary">选取头像</el-button>
              <el-button
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload"
              >上传头像</el-button>
              <div slot="tip" class="el-upload__tip">头像选择</div>
            </el-upload>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="imageDialog = false">关 闭</el-button>
          </div>
        </el-dialog>
      </el-header>

      <el-container>
        <el-aside width="160px" style="background-color: rgb(238, 241, 246)">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-vertical-demo"
            @select="handleOpen"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="first">
              <i class="el-icon-document"></i>
              <span slot="title">服务器邮件</span>
            </el-menu-item>
            <el-menu-item index="searcheml">
              <i class="el-icon-document"></i>
              <span slot="title">全文检索</span>
            </el-menu-item>
            <el-menu-item index="scrollpicture">
              <i class="el-icon-document"></i>
              <span slot="title">热频轮播</span>
            </el-menu-item>
            <el-menu-item index="uploadfile">
              <i class="el-icon-document"></i>
              <span slot="title">邮件上传</span>
            </el-menu-item>
            <el-menu-item index="emljavax">
              <i class="el-icon-document"></i>
              <span slot="title">JavaXmail解析</span>
            </el-menu-item>
            <el-menu-item index="imappop3">
              <i class="el-icon-document"></i>
              <span slot="title">IMAP/POP3解析</span>
            </el-menu-item>
            <el-menu-item index="emlindex">
              <i class="el-icon-document"></i>
              <span slot="title">索引库邮件</span>
            </el-menu-item>
            <el-menu-item index="infomodify">
              <i class="el-icon-document"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>
            <el-menu-item index="usermanager" v-if="userSO_json.role=='管理员'">
              <i class="el-icon-document"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <!-- el-submenu -->
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>数据统计-仪表盘</span>
              </template>
              <el-menu-item index="statisticfrom">
                <i class="el-icon-setting"></i>
                <span slot="title" class="span">邮件来源</span>
              </el-menu-item>
              <el-menu-item index="statisticdate">
                <i class="el-icon-setting"></i>
                <span slot="title" class="span">日期分布</span>
              </el-menu-item>
              <el-menu-item index="line">
                <i class="el-icon-setting"></i>
                <span slot="title" class="span">---</span>
              </el-menu-item>
            </el-submenu>
            <!-- el-submenu  end-->
          </el-menu>
          <div style="border:1px solid #F00; width:300px; height:800px"></div>
        </el-aside>
        <el-main width="100%">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
      <el-footer>法律声明 阳光准则 网站地图 粤网文【2017】6138-1456号 Copyright © 1998 - 2019 Tencent. All Rights Reserved. 腾讯公司 版权所有</el-footer>
    </el-container>
  </div>
</template>




<script>
import axios from "axios";
export default {
  data() {
    return {
      // 头像栏
      collapse: false,
      fullscreen: false,
      //主体
      activeIndex: "first",
      //后续身份操作
      imageDialog: false,
      imageName: this.initImage(
        JSON.parse(
          sessionStorage.getItem("userSO_json")
        ).imageLocation.toString()
      )
    };
  },
  created() {
    //进入后台主页默认展示第一个子页面emlserver
    /* this.$router.push({
      path: "/backhome/emlserver"
    }); */
    //每一次刷新应用于最新的userSO--含imageLocation
    this.initUserSO();
  },
  computed: {
    //进入的用户
    userSO_json() {
      let userSO_json = JSON.parse(sessionStorage.getItem("userSO_json"));
      return userSO_json;
    }
  },
  methods: {
    //刷新更新sessionStorage里的userSO
    initUserSO() {
      axios
        .get("/api/AuthController/freshuser", {
          headers: {
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let userSO_json = JSON.stringify(response.data);
          sessionStorage.setItem("userSO_json", userSO_json);
          console.log("this.userSO_json", this.userSO_json);
          let arr = response.data.imageLocation.split(/\\/);
          this.imageName = arr[arr.length - 1].toString();
          this.$message({
            showClose: true,
            message: "恭喜你，页面刷新成功消息",
            type: "success"
          });
        })
        .catch(error => {
          console.log(error);
          alert("网络错误，不能访问");
        });
    },
    initImage(imageLocation) {
      let arr = imageLocation.split(/\\/);
      this.imageName = arr[arr.length - 1].toString();
      console.log("split-name", this.imageName);
    },

    uploadSuccess(response, file, fileList) {
      console.log("上传头像", response);
      this.$message({
        showClose: true,
        message: "恭喜你，头像上传成功",
        type: "success"
      });
    },
    // 上传错误后的回调
    uploadError(err, file, fileList) {
      if (err.message != "") {
        this.$message.warning(err.message);
      } else {
        this.$message.warning("网络错误，不能访问");
      }
    },
    uploadImage(params) {
      const formdata = new FormData();
      const file = params.file;
      formdata.append("file", file);

      axios
        .post("/api/UserController/file/image", formdata, {
          headers: {
            //头部信息
            "Content-Type": "multipart/form-data",
            token: this.userSO_json.token
          }
        })
        .then(response => {
          let destFile = response.data.data.destFile;
          let arr = destFile.split(/\\/);
          setTimeout(() => {
            this.imageName = arr[arr.length - 1].toString();
            console.log("this.imageName", this.imageName);
          }, 1000);
          this.$message({
            showClose: true,
            message: "恭喜你，头像上传成功",
            type: "success"
          });
        })
        .catch(error => {
          //前端的token留在点击退出按钮那里删除，这里就只是提示过期
          this.$message({
            showClose: true,
            message: "后端token过期，请重新登录",
            type: "warning"
          });
        });
    },

    //提交
    submitUpload() {
      this.$refs.upload.submit();
    },

    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == "loginout") {
        //前端清除
        sessionStorage.removeItem("userSO_json");
        //后端清除
        axios
          .get("/api/AuthController/loginout", {
            headers: {
              token: this.userSO_json.token
            }
          })
          .then(response => {
            this.$message({
              showClose: true,
              message: "退出成功，清除前后端token",
              type: "success"
            });
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: "退出成功，清除前后端token",
              type: "warning"
            });
          });
        this.$router.push("/");
      } else if (command == "changeImage") {
        this.imageDialog = true;
      }
    },

    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    //主体
    handleOpen(key, keyPath) {
      if (key == "first") {
        this.$router.push({
          path: "/backhome/emlserver"
        });
      } else if (key == "emljavax") {
        this.$router.push({
          path: "/backhome/emljavax"
        });
      } else if (key == "emlindex") {
        this.$router.push({
          path: "/backhome/emlindex"
        });
      } else if (key == "statisticfrom") {
        this.$router.push({
          path: "/backhome/statisticfrom"
        });
      } else if (key == "statisticdate") {
        this.$router.push({
          path: "/backhome/statisticdate"
        });
      } else if (key == "line") {
        this.$router.push({
          path: "/backhome/line"
        });
      } else if (key == "infomodify") {
        this.$router.push({
          path: "/backhome/infomodify"
        });
      } else if (key == "usermanager") {
        this.$router.push({
          path: "/backhome/usermanager"
        });
      } else if (key == "searcheml") {
        this.$router.push({
          path: "/backhome/searcheml"
        });
      } else if (key == "scrollpicture") {
        this.$router.push({
          path: "/backhome/scrollpicture"
        });
      } else if (key == "uploadfile") {
        this.$router.push({
          path: "/backhome/uploadfile"
        });
      } else if (key == "imappop3") {
        this.$router.push({
          path: "/backhome/imappop3"
        });
      }
    }
  }
};
</script>


<style scoped>
/* 登录头像栏 */
.btn .el-icon-menu {
  width: 100%;
  height: 100%;
  font-size: 26px;
}
.btn.el-button--small {
  padding: 0;
  margin-left: 10px;
}
.header-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*background:yellow;*/
}
.header-right {
  float: right;
}
.header-user-con {
  float: right;
}

.header-welcome {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
}
.btn-fullscreen {
  float: left;
  font-size: 20px;
  font-weight: 700;
  transform: rotate(45deg);
  cursor: pointer;
  margin: 0 20px;
}
.btn-bell {
  float: right;
  margin-right: 20px;
  font-size: 20px;
  font-weight: 700;
}
.user-avator {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ccc;
  overflow: hidden;
  margin-left: 18px;
  margin-top: 50px;
}
.user-dropdown {
  float: right;
  overflow: hidden;
  margin-right: 18px;
  margin-top: -40px;
}
.user-avator img {
  width: 40px;
  height: 40px;
}
.user-name {
  float: left;
  margin-right: 50px;
  cursor: pointer;
}

.btn-bell {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 15px;
  cursor: pointer;
}
.btn-bell-badge {
  position: absolute;
  right: 2px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #f56c6c;
  color: #fff;
}
/* 主体 */
.el-aside {
  color: #333;
}
.el-header {
  background-color: #546364;
  color: rgb(0, 0, 255);
  font-size: 30px;
  line-height: 60px;
  padding: 0px;
}
.el-footer {
  height: 40px;
  width: 100%;
  background-color: #ddd;
  position: fixed;
  bottom: 0;
  margin-top: 20px;
}
/* css注释：设置使用对象选择器名为“.div”的字体大小为14px */
.div {
  font-size: 14px;
}
.span {
  font-size: 8px;
}

/* .el-header {
width: 100%;
height: 60px;
background-color: #545c64;
color: #333;
text-align: center;
line-height: 50px;
padding: 0;
} */
</style>